●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Responsive dashboard page with a collapsible sidebar, header, and main content area.
- Stat cards grid showing KPIs (title, value, percent change).
- Larger content cards for lists or empty states.
- Period selector toggle (Tag / Woche / Monat / Jahr).
- Floating action button for quick actions.
- Sidebar navigation with headings and NavLink active state.
- Font Awesome icons in cards, nav and header.
## Key components
- Razor components: DashboardPage.razor, Sidebar.razor, StatCard.razor, DashboardCard.razor
- Models: StatCardViewModel, SidebarMenuItemModel
- Blazor primitives: NavLink, RenderFragment, [Parameter]
- Methods/properties: OnInitialized, ToggleSidebar, selectedPeriod, stats list
## How it works
- Data is provided from OnInitialized into a List<StatCardViewModel> and rendered with a foreach loop into StatCard components.
- Sidebar menu items are populated from SidebarMenuItemModel and rendered as NavLink entries with ActiveClass for selected route styling.
- Period selector updates a local field (selectedPeriod) via onclick lambdas; no @bind is used for two-way binding on the selector.
- ToggleSidebar toggles IsOpenOnMobile which adjusts CSS transform classes on the sidebar for mobile show/hide.
- RenderFragment parameters (Header, ChildContent) provide layout composition for DashboardCard.
## Styling
- Tailwind-style utility classes (flex, grid, gap-*, px-*, text-*, bg-slate-*) drive layout and spacing (Tailwind layout and responsive breakpoints).
- Font Awesome provides iconography via i tags and class names.
- Responsiveness handled with Tailwind breakpoints (sm, lg, xl) and utility-driven grid columns.
- Visual states use class toggles (e.g., selectedPeriod conditional classes) rather than a component library theme.
## Reuse steps
1. Add components and models to a Blazor project and import the components namespace where needed.
2. Integrate Tailwind CSS (or translate utilities to a chosen CSS framework) and include Font Awesome assets in index.html/_Host.
3. Register routes (e.g., "/dashboard") in App.razor and ensure NavLink route targets exist.
4. Replace the placeholder data in OnInitialized with data service calls (inject services and load async in OnInitializedAsync).
5. Adapt styling and accessibility attributes as required (keyboard focus, aria labels) and wire actions for the floating action button.
## Limitations & next steps
- This is a single-page UI generated by Instruct UI and focuses on static layout; backend services, authentication, and real data wiring are not included.
- No form validation or EditForm usage is present; add EditForm/DataAnnotationsValidator for editable cards or creation flows.
- Period selector updates only local state; implement filtering logic and async data refresh for each period.
- Consider extracting shared components (icon wrapper, toggle group) and adding unit/visual tests.